<template>
  <el-container class="real-time-monitoring">
    <!--      控制侧边栏展开的按钮-->
    <el-button :class="{asideButtonNormal:true,asideButtonShow:asideShow,asideButtonHide:!asideShow}"
               type="success" :icon="asideShow?'el-icon-d-arrow-left':'el-icon-d-arrow-right'"
               plain
               @click="()=>this.asideShow = !this.asideShow"
    />
    <!--    侧边栏-->
    <el-aside class="aside" v-show="asideShow">
      <!--      设备树/OSD-->
      <el-tabs type="card" style="margin-top: 10px;">
        <el-tab-pane class="tree-pane" label="查看设备树">
          <div class="scheme">
            <div class="select-scheme">
              <span>预览方案：</span>
              <el-select v-model="schemeValue" placeholder="请选择预选方案">
                <el-option
                    v-for="item in schemeOptions"
                    :key="item.schemeName"
                    :label="item.schemeName"
                    :value="item.schemeName">
                </el-option>
              </el-select>
            </div>
            <el-button type="primary" @click="openConfig">配置</el-button>
          </div>
          <div class="status scheme">
            <div class="select-status">
              <span>状态筛选：</span>
              <el-select v-model="statusValue" placeholder="请选择设备状态">
                <el-option key="" label="全部" value=""></el-option>
                <el-option key="1" label="在线" value="1"></el-option>
                <el-option key="0" label="离线" value="0"></el-option>
              </el-select>
            </div>
          </div>
          <div class="tree-content">
            <p class="title">企业监控中心（总数:100&emsp;在线:99）</p>
            <el-tree class="tree-data" :data="treeData" :props="defaultProps" draggable
                     :allow-drop="allowDrop" :allow-drag="allowDrag" @node-click="treeClick"/>
          </div>
        </el-tab-pane>
        <el-tab-pane label="查看OSD">
          <div class="osd-info">
            <div class="osd-item">
              <span class="label">时间：</span>
              <span class="main-content">
                {{ osdData.time }}
              </span>
            </div>
            <div class="osd-item">
              <span class="label">组织信息：</span>
              <span class="main-content">
                {{ osdData.organization }}
              </span>
            </div>
            <div class="osd-item">
              <span class="label">区域信息：</span>
              <span class="main-content">
                {{ osdData.areaInfo }}
              </span>
            </div>
            <div class="osd-item">
              <span class="label">设备信息：</span>
              <span class="main-content">
                {{ osdData.equipment }}
              </span>
            </div>
          </div>
        </el-tab-pane>
      </el-tabs>
      <!--      底部控制台-->
      <div class="bottom-control">
        <el-tabs type="card">
          <el-tab-pane label="云台控制">
            <div v-show="bottomControlShow" class="cloud-control control-item">
              <div class="direction-control">
                <div class="control-buttons">
                  <el-button class="top-left"><i class="iconfont icon-106fangxiang_zuoshang"/></el-button>
                  <el-button class="top"><i class="iconfont icon-100fangxiang_xiangshang"/></el-button>
                  <el-button class="top-right"><i class="iconfont icon-104fangxiang_youshang"/></el-button>
                  <el-button class="left"><i class="iconfont icon-103fangxiang_xiangzuo"/></el-button>
                  <el-button class="reset" icon="el-icon-refresh"></el-button>
                  <el-button class="reset-replace"></el-button>
                  <el-button class="right"><i class="iconfont icon-101fangxiang_xiangyou"/></el-button>
                  <el-button class="bottom-left"><i class="iconfont icon-107fangxiang_zuoxia"/></el-button>
                  <el-button class="bottom"><i class="iconfont icon-102fangxiang_xiangxia"/></el-button>
                  <el-button class="bottom-right"><i class="iconfont icon-105fangxiang_youxia"/></el-button>
                </div>
                <div class="control-focus">
                  <div class="control-focus-item">
                    <i class="icon-button el-icon-remove-outline"></i>
                    <span>变倍</span>
                    <i class="icon-button el-icon-circle-plus-outline"></i>
                  </div>
                  <div class="control-focus-item">
                    <i class="icon-button el-icon-zoom-out"></i>
                    <span>聚焦</span>
                    <i class="icon-button el-icon-zoom-in"></i>
                  </div>
                  <div class="control-focus-item">
                    <i class="icon-button el-icon-help"></i>
                    <span>光圈</span>
                    <i class="icon-button el-icon-s-help"></i>
                  </div>
                </div>
              </div>
              <div class="params-control">
                <div class="params-control-item">
                  <span class="label">步长：</span>
                  <div class="content">
                    <el-slider
                        v-model="step"
                        show-input :min="0" :max="1" :step="0.1" :show-tooltip="false">
                    </el-slider>
                  </div>
                </div>
                <div class="params-control-item">
                  <span class="label">预设位：</span>
                  <div class="setting-content content">
                    <div class="select-options">
                      <el-select v-model="presetBi" placeholder="请选择">
                        <el-option
                            v-for="item in presetBiOptions"
                            :key="item"
                            :label="item"
                            :value="item">
                        </el-option>
                      </el-select>
                    </div>
                    <div class="setting-options">
                      <el-button class="setting-button" type="info" icon="el-icon-s-tools"
                                 @click="openPresetBit"></el-button>
                      <div class="buttons">
                        <el-button class="execute" type="primary">执行</el-button>
                      </div>
                    </div>
                  </div>
                </div>
                <div class="params-control-item">
                  <span class="label">巡航组：</span>
                  <div class="setting-content content">
                    <div class="select-options">
                      <el-select v-model="cruiseGroup" placeholder="请选择">
                        <el-option
                            v-for="item in cruiseGroupOptions"
                            :key="item"
                            :label="item"
                            :value="item">
                        </el-option>
                      </el-select>
                    </div>
                    <div class="setting-options">
                      <el-button class="setting-button" type="info" icon="el-icon-s-tools"
                                 @click="openCruiseGroup"></el-button>
                      <div class="buttons">
                        <el-switch
                            v-model="cruiseSwitch"
                            active-text="开"
                            inactive-text="关">
                        </el-switch>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </el-tab-pane>
          <el-tab-pane label="功能参数">
            <div v-show="bottomControlShow" class="control-item">
              <p class="title">输出设置</p>
              <div class="output-setting">
                <div class="setting-item">
                  <span class="item-label">亮度：</span>
                  <div class="slider-item">
                    <el-slider v-model="slider.brightness" show-input :show-input-controls="false"
                               :show-tooltip="false"></el-slider>
                  </div>
                  <el-button type="warning" icon="el-icon-refresh-left" circle></el-button>
                </div>
                <div class="setting-item">
                  <span class="item-label">对比度：</span>
                  <div class="slider-item">
                    <el-slider v-model="slider.contrast" show-input :show-input-controls="false"
                               :show-tooltip="false"></el-slider>
                  </div>
                  <el-button type="warning" icon="el-icon-refresh-left" circle></el-button>
                </div>
                <div class="setting-item">
                  <span class="item-label">饱和度：</span>
                  <div class="slider-item">
                    <el-slider v-model="slider.saturation" show-input :show-input-controls="false"
                               :show-tooltip="false"></el-slider>
                  </div>
                  <el-button type="warning" icon="el-icon-refresh-left" circle></el-button>
                </div>
                <div class="setting-item">
                  <span class="item-label">色调：</span>
                  <div class="slider-item">
                    <el-slider v-model="slider.tone" show-input :show-input-controls="false"
                               :show-tooltip="false"></el-slider>
                  </div>
                  <el-button type="warning" icon="el-icon-refresh-left" circle></el-button>
                </div>
              </div>
              <el-button type="warning" round>恢复默认</el-button>
            </div>
          </el-tab-pane>
        </el-tabs>
        <!--        底部控制台展开/收起按钮-->
        <el-button class="bottom-control-button"
                   type="success"
                   plain
                   @click="()=>this.bottomControlShow = !this.bottomControlShow"
        >
          <i v-show="!bottomControlShow" class="iconfont icon-shuangjiantou-shang"/>
          <i v-show="bottomControlShow" class="iconfont icon-shuangjiantou-xia"/>
        </el-button>
      </div>
    </el-aside>
    <!--    主体内容-->
    <el-container class="main-video">
      <el-button class="header-show-button"
                 type="success"
                 plain
                 @click="()=>this.headShow=!this.headShow"
      >
        <i v-show="headShow" class="iconfont icon-shuangjiantou-shang"/>
        <i v-show="!headShow" class="iconfont icon-shuangjiantou-xia"/>
      </el-button>
      <!--      头部操作栏-->
      <el-header v-show="headShow">
        <div class="split-screen">
          <i :class="['iconfont','icon-gongge1',{selected:splitNum===1}]"
             @click="()=>this.splitNum = 1"></i>
          <i :class="['iconfont','icon-gongge2',{selected:splitNum===4}]"
             @click="()=>this.splitNum = 4"></i>
          <i :class="['iconfont','icon-gongge3',{selected:splitNum===6}]"
             @click="()=>this.splitNum = 6"></i>
          <i :class="['iconfont','icon-gongge4',{selected:splitNum===9}]"
             @click="()=>this.splitNum = 9"></i>
          <i :class="['iconfont','icon-gongge7',{selected:splitNum===16}]"
             @click="()=>this.splitNum = 16"></i>
        </div>
        <div class="video-setting">
          <div class="video-setting-item">
            <i class="icon el-icon-delete"></i>
            <span class="label">全部清除</span>
          </div>
          <div class="video-setting-item">
            <i class="icon el-icon-video-pause"></i>
            <span class="label">停止</span>
          </div>
          <div class="video-setting-item">
            <i class="icon el-icon-full-screen"></i>
            <span class="label">全屏</span>
          </div>
          <div class="video-setting-item">
            <i class="icon el-icon-camera"></i>
            <span class="label">抓拍</span>
          </div>
          <div class="video-setting-item">
            <i class="icon el-icon-video-camera"></i>
            <span class="label">录像</span>
          </div>
          <div class="video-setting-item">
            <i class="icon iconfont icon-fullscreen-expand"></i>
            <span class="label">放大</span>
          </div>
          <div class="video-setting-item">
            <i class="icon iconfont icon-fullscreen-shrink"></i>
            <span class="label">缩小</span>
          </div>
        </div>
        <div class="video-cloud-setting video-setting">
          <div class="video-setting-item">
            <i class="icon el-icon-headset"></i>
            <span class="label">监听</span>
          </div>
          <div class="video-setting-item">
            <i class="icon el-icon-phone-outline"></i>
            <span class="label">对讲</span>
          </div>
          <div class="video-setting-item">
            <i class="icon el-icon-coordinate"></i>
            <span class="label">云台</span>
          </div>
          <div class="video-setting-item">
            <i class="icon el-icon-set-up"></i>
            <span class="label">参数</span>
          </div>
        </div>
      </el-header>
      <!--      监控屏幕-->
      <el-main>
        <VideoComponent :videoData="videoData" :splitNum="splitNum"/>
      </el-main>
    </el-container>
    <div class="dialogs">
      <!--      配置弹窗-->
      <ConfigComponent ref="ConfigComponent" :dataSource="schemeOptions" :treeData="treeData"></ConfigComponent>
      <PresetBit ref="PresetBit"></PresetBit>
      <CruiseGroup ref="CruiseGroup"></CruiseGroup>
    </div>
  </el-container>
</template>

<script>
import VideoComponent from "./modules/videoComponent/VideoComponent";
import ConfigComponent from "./modules/dialogs/PreselectedScheme";
import PresetBit from "./modules/dialogs/PresetBit";
import CruiseGroup from "./modules/dialogs/CruiseGroup";

export default {
  name: 'RealTimeMonitoring',
  components: {VideoComponent, ConfigComponent, PresetBit, CruiseGroup},
  data() {
    return {
      asideShow: true,//侧边栏是否显示
      osdData: {},//osd数据信息
      defaultProps: {//树结构配置选项
        children: 'children',
        label: 'label'
      },
      treeData: [],//树结构数据
      schemeOptions: [],//预选方案数据
      schemeValue: undefined,//预选方案
      statusOptions: [],//状态选择
      statusValue: undefined,
      bottomControlShow: true,//底部控制台是否显示
      slider: {
        brightness: 60,//亮度
        contrast: 50,//对比度
        saturation: 40,//饱和度
        tone: 50,//色调
      },
      step: 0.5,//步长
      presetBi: undefined,//预设位
      presetBiOptions: [],//预设为选项
      cruiseGroup: undefined,//巡航组
      cruiseGroupOptions: [],//巡航组选项
      cruiseSwitch: false,//巡航组开启按钮
      headShow: true,//控制顶部操作栏显示
      videoData: [],//监控数据
      splitNum: 4,//分屏数量
    }
  },
  created() {
    //添加假数据
    this.osdData = {
      time: '2021年7月23日 16:02:29',
      organization: '组织名称-组织名称',
      areaInfo: '所属区域',
      equipment: '设备名称'
    }
    this.treeData = [
      {
        label: '组织1',
        value: '组织1',
        children: [
          {
            label: '区域',
            value: '区域',
            children: [
              {
                label: '设备1',
                value: '区域',
                children: [
                  {
                    label: '通道1',
                    value: '通道1'
                  },
                  {
                    label: '通道2',
                    value: '通道2'
                  }
                ]
              }
            ]
          }
        ]
      },
      {
        label: '组织2',
        value: '组织2',
        children: [
          {
            label: '区域',
            value: '区域',
            children: [
              {
                label: '设备2',
                value: '设备2',
                children: [
                  {
                    label: '通道1',
                    value: '通道1'
                  },
                  {
                    label: '通道2',
                    value: '通道2'
                  }
                ]
              }
            ]
          }
        ]
      },
      {
        label: '组织3',
        value: '组织3',
        children: [
          {
            label: '区域',
            value: '区域',
          }
        ]
      },
      {
        label: '组织4',
        value: '组织4',
        children: [
          {
            label: '区域',
            value: '区域',
          }
        ]
      }
    ]
    this.schemeOptions = [
      {
        schemeName: '方案1',
        channelsNum: 5
      },
      {
        schemeName: '方案2',
        channelsNum: 6
      },
      {
        schemeName: '方案3',
        channelsNum: 8
      }
    ]
    this.presetBiOptions = [1, 2, 3, 4, 5]
    this.cruiseGroupOptions = [1, 2, 3, 4]
  },
  methods: {
    //树结构点击触发
    treeClick(data) {
      console.log(data)
    },
    //是否允许树节点拖拽
    allowDrag(node) {
      console.log('node', node)
      return true
    },
    //是否允许树节点放置
    allowDrop(draggingNode, dropNode, type) {
      console.log('draggingNode', draggingNode)
      console.log('dropNode', dropNode)
      console.log('type', type)
      return true
    },
    //打开配置弹窗
    openConfig() {
      this.$refs.ConfigComponent.dialogVisible = true
    },
    //打开预设位弹窗
    openPresetBit() {
      this.$refs.PresetBit.dialogVisible = true
    },
    //打开巡航组
    openCruiseGroup() {
      this.$refs.CruiseGroup.dialogVisible = true
    }
  }
}
</script>

<style scoped lang="scss">
@import "./modules/sass/RealTimeMonitoring";
@import "modules/sass/font_icon/iconfont.css";
</style>
